<template>
  <div>
    <h1>我的题库</h1>
    <el-table :data="paginatedQuestionBank" stripe style="width: 100%">
      <el-table-column prop="questionBank.bankName" label="题库名称" width="180" />
      <el-table-column prop="singleChoice" label="单选题数量" width="180" />
      <el-table-column prop="multipleChoice" label="多选题数量" width="180" />
      <el-table-column prop="judge" label="判断题数量" width="180" />
      <el-table-column prop="shortAnswer" label="简答题数量" width="180" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button @click="showTrain(scope.row)">开始训练</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Pagination -->
    <div class="demo-pagination-block">
      <div class="demonstration">分页</div>
      <el-pagination
        v-model:current-page="start.page.pageNo"
        v-model:page-size="start.page.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :size="size"
        :total="start.page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- Train Details Dialog -->
    <el-dialog
      title="训练题库详情"
      v-model="dialogVisible"
      width="50%"
      @close="clearTrainDetails"
    >
      <el-card class="train-details-card" :body-style="{ padding: '20px' }">
        <div>
          <p><strong>题库名称：</strong>{{ trainDetails.bankName }}</p>
          <el-divider></el-divider>
          <p><strong>单选题数量：</strong>{{ trainDetails.singleChoice }}</p>
          <el-divider></el-divider>
          <p><strong>多选题数量：</strong>{{ trainDetails.multipleChoice }}</p>
          <el-divider></el-divider>
          <p><strong>判断题数量：</strong>{{ trainDetails.judge }}</p>
          <el-divider></el-divider>
          <p><strong>简答题数量：</strong>{{ trainDetails.shortAnswer }}</p>
          <el-divider></el-divider>
          <el-select v-model="selectedPracticeType" placeholder="请选择练习类型">
            <el-option label="顺序练习" value="1"></el-option>
            <el-option label="随机练习" value="2"></el-option>
            <el-option label="单选题" value="3"></el-option>
            <el-option label="多选题" value="4"></el-option>
            <el-option label="判断题" value="5"></el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="startTraining(trainDetails.bankId)">开始训练</el-button>
        </span>
      </el-card>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { ComponentSize } from 'element-plus'
import { getQuestionBankList } from '@/api/ExamOnline/QuestionBank'

const router = useRouter()
const size = ref<ComponentSize>('default')

const dialogVisible = ref(false)
const selectedPracticeType = ref<string | null>(null)
const trainDetails = reactive({
  bankId: '',
  bankName: '',
  singleChoice: 0,
  multipleChoice: 0,
  judge: 0,
  shortAnswer: 0,
})

const start = reactive({
  questionBank: [],
  page: {
    pageNo: 1,
    pageSize: 10,
    total: 0,
  },
  provides: {
    bankName: '',
    pageNo: 1,
    pageSize: 999
  }
})

const paginatedQuestionBank = computed(() => {
  const startIdx = (start.page.pageNo - 1) * start.page.pageSize
  const endIdx = start.page.pageNo * start.page.pageSize
  return start.questionBank.slice(startIdx, endIdx)
})

async function getQuestionBank() {
  const { data } = await getQuestionBankList(start.provides)
  start.questionBank = data.data.bankHaveQuestionSums
  start.page.total = data.data.bankHaveQuestionSums.length
}

function handleSizeChange(val: number) {
  start.page.pageSize = val
  start.page.pageNo = 1 // 每次改变页面大小时，将页码重置为第一页
  getQuestionBank() // 更新数据
}

function handleCurrentChange(val: number) {
  start.page.pageNo = val
  getQuestionBank() // 更新数据
}

function showTrain(questionBank) {
  // 设置弹窗显示的题库详细信息
  trainDetails.bankId = questionBank.questionBank.bankId
  trainDetails.bankName = questionBank.questionBank.bankName
  trainDetails.singleChoice = questionBank.singleChoice
  trainDetails.multipleChoice = questionBank.multipleChoice
  trainDetails.judge = questionBank.judge
  trainDetails.shortAnswer = questionBank.shortAnswer

  dialogVisible.value = true
}

function clearTrainDetails() {
  trainDetails.bankId = ''
  trainDetails.bankName = ''
  trainDetails.singleChoice = 0
  trainDetails.multipleChoice = 0
  trainDetails.judge = 0
  trainDetails.shortAnswer = 0
  selectedPracticeType.value = null
}

function startTraining(bankId) {
  if (!selectedPracticeType.value) {
    // 提示用户选择练习类型
    alert('请选择练习类型')
    return
  }
  // 执行开始训练的逻辑
  console.log('开始训练:', bankId)
  // 跳转到训练页面
  const additionalParameter = selectedPracticeType.value
  router.push(`/train/${bankId}/${additionalParameter}`)
}

onMounted(() => {
  getQuestionBank()
})
</script>

<style scoped lang="less">
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>